<template>
  <div class="userManagement-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix view flex-row">
        <el-button type="primary" class="m-r-15" @click="handleEdit">
          新建模板
        </el-button>

        <div class="demo-input-suffix view flex-row align-center">
          品种名称/代码：
          <el-input
            placeholder="请输入品种代码"
            v-model="query.contract"
            class="m-r-15 w200"
          >
            <i slot="suffix" class="el-input__icon el-icon-date"></i>
          </el-input>
        </div>

        <el-button type="primary" class="m-r-15" @click="getstocketmainList">
          搜索
        </el-button>
      </div>

      <div class="view flex-row">
        <div style="width: 200px" class="m-r-15">
          <el-table
            highlight-current-row
            @row-click="selectHandle"
            :row-style="{ cursor: 'pointer' }"
            :height="getH"
            :data="tableData"
            border
            class="m-r-15"
          >
            <el-table-column prop="name" label="模板名称"></el-table-column>
            <el-table-column show-overflow-tooltip label="操作" align="center">
              <template #default="{ row }">
                <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                <el-button type="text" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="width: 500px">
          <el-table
            highlight-current-row
            :height="getH"
            :row-style="{ cursor: 'pointer' }"
            @row-click="selectHandle1"
            empty-text="请选择模板"
            :data="tableData2"
            border
            class="m-r-15"
          >
            <el-table-column
              prop="exchangename"
              label="交易所"
            ></el-table-column>

            <el-table-column prop="contract" label="品种代码"></el-table-column>

            <el-table-column prop="codename" label="品种名称"></el-table-column>
            <el-table-column prop="curreny" label="币种"></el-table-column>
          </el-table>
        </div>

        <div class="flex-1 m-l-10" style="height: calc(100vh - 100px)">
          <div class="h30 width100">详细设置:</div>

          <el-tabs type="border-card" style="height: 75%">
            <el-tab-pane label="合约代码">
              <div style="overflow-y: auto; max-height: calc(100vh - 350px)">
                <div
                  class="view flex-row m-b-15"
                  v-for="(item, index) in heyuelist"
                  :key="index"
                >
                  <div class="w150 m-r-30">
                    <div class="w80 m-b-10">合约代码：</div>
                    <el-input
                      placeholder="请输入合约代码"
                      readonly
                      v-model="item.code"
                    ></el-input>
                  </div>
                  <div class="w80">
                    <div class="w60 m-b-10">手续费：</div>
                    <el-input
                      placeholder="请输入手续费率"
                      v-model="item.mnum"
                      type="number"
                    ></el-input>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div style="text-align: center" class="m-t-25">
            <el-button
              type="primary"
              @click="saveFeeList"
              :loading="saveLoading"
            >
              保存
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- <el-pagination
      background
      :current-page="queryForm.pageNo"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination> -->
    <edit ref="edit" @fetch-data="fetchData"></edit>
  </div>
</template>

<script>
  import {
    getFeelist,
    delfee,
    savefee,
    getfeeinfo,
    getstocketmain,
  } from '@/api/userManagement'
  import Edit from './components/UserManagementEdit'
  import day from 'dayjs'
  export default {
    name: 'ReportManagement',
    components: { Edit },
    data() {
      return {
        tableData2: [],
        day: day,
        activeName: 'first',
        tableData: [],
        list: null,
        value1: '',
        input3: '',
        contract: '',
        info: {
          contract: '',
          mnum: '',
        },
        options: [
          {
            value: 1,
            label: '逐笔',
          },
          {
            value: 2,
            label: '盯市',
          },
        ],
        query: {
          contract: '',
        },
        feeid: '',
        saveLoading: false,
        heyuelist: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          username: '',
        },
      }
    },
    computed: {
      getH() {
        return window.innerHeight - 200
      },
    },
    created() {
      this.fetchData()
    },
    methods: {
      getstocketmainList() {
        this.vloading = true
        getstocketmain({ contract: this.query.contract }).then((res) => {
          this.vloading = false
          this.tableData2 = res.data
        })
      },
      saveFeeList() {
        this.saveLoading = true
        this.heyuelist.forEach((item, index) => {
          this.handleSavefee(item.code, item.mnum)
          if (index == this.heyuelist.length - 1) {
            this.$baseMessage('保存成功！', 'success')
            this.saveLoading = false
          }
        })
      },
      handleSavefee(contract, mnum) {
        savefee({ contract, mnum, feeid: this.feeid })
          .then((res) => {})
          .catch((ret) => {
            this.$Message(ret.msg)
            this.saveLoading = false
          })
      },
      getInfo() {
        getfeeinfo({ feeid: this.feeid, contract: this.contract })
          .then((res) => {
            this.heyuelist = res.data
          })
          .catch((ret) => {
            this.$Message(ret.msg)
          })
      },
      selectHandle1(selection) {
        if (!this.feeid) {
          this.$baseMessage('请先选择模板', 'error')
          return false
        }
        this.contract = selection.contract
        this.getInfo()
      },
      selectHandle(selection) {
        this.feeid = selection.id
        this.getstocketmainList()
        // this.getInfo()
      },
      handleEdit(row) {
        if (row.id) {
          row.mname = row.name
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          delfee({ mid: row.id })
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.fetchData()
            })
            .catch((ret) => {
              this.$Message(ret.msg)
            })
        })
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getFeelist(this.queryForm)
        this.tableData = data
        this.feeid = this.tableData[0].id
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .report-content {
    .el-tabs__header {
      margin-bottom: 0 !important;
    }
  }
  ::v-deep .box-card-outer {
    border-top: 0 !important;
    .el-card {
      border-top: 0 !important;
    }
  }
  ::v-deep .box-card-no-padding {
    .el-card__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
</style>
